<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>诗人大全(所有的诗人)</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">

    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
        #divDynasty{
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <header id="header"></header>

    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item active" aria-current="page">诗人大全</li>
            </ol>
        </nav>

        <div class="row" id="author">
            <div class="col col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div id="divDynasty" class="d-flex flex-row flex-nowrap author-criteria-expand">
                            <div style="width:3rem;">
                                <span class="m-1 badge">朝代：</span>
                            </div>
                            <ul class="list-unstyled d-flex flex-row flex-wrap align-items-center w-100">
                                <li class="m-1 badge badge-light"><a href="allAuthor.html">不限</a></li>
                                <li class="m-1 badge badge-light" v-for="Dy in DyNames"><a :href="'authorToDynasty.html?'+Dy.name" v-text="Dy.name">先秦</a></li>
                            <!--<li class="m-1 badge badge-light"><a href="/authors/cd-lianghan">两汉</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-weijin">魏晋</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-nanbeichao">南北朝</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-sui">隋代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-tang">唐代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-wudai">五代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-song">宋代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-liao">辽朝</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-jin">金朝</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-yuan">元代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-ming">明代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-qing">清代</a></li>
                                <li class="m-1 badge badge-light"><a href="/authors/cd-jinxiandai">近现代</a></li>-->
                            </ul>
                            <div class="d-block d-md-none">
                                <a class="m-1" href="javascript:" style="width:1.2rem;" onclick="collapseClick(this,'divDynasty')"><i class="material-icons">keyboard_arrow_up</i></a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3" v-for="n in writers">
                    <div class="card-body d-flex">
                        <div class="ml-1 w-100">
                            <h4 class="card-title">[<a :href="'Dynasty.html?'+n.dynasty" v-text="n.dynasty">宋朝</a>]<a :href="'author.html?'+n.name" v-text="n.name">哀长吉</a> </h4>
                            <span class="txt" v-html="n.txt">
                                <p>
                                哀长吉（生卒年不详）字叔巽，又字寿之，晚号委顺翁，崇安（今属福建）人。嘉定十三年（1220） 进士。授邵武簿，调靖江书记，秩满归隐武夷山。 有《鸡肋集》，《全宋词》辑其词六首。</p>
                                <p>
                                    王国维在《人间词话》中曾批评南宋词已成&ldquo;羔雁之具&rdquo;，意思是词已成为人们之间已相馈赠的礼品，失去了真情。这个评价有合理之处，但不免绝对。此词是祝贺他人娶媳妇的应酬之作，但写得喜气洋溢，自有一股浓郁的生活情趣。想来新人合卺之夕，当其亲朋云集、宾客满堂、语笑喧哗之际，丝竹并起，歌者执擅板引吭唱此一阕，定然平添出许多的热闹。</p>
                                <p>
                                    &ldquo;紫陌&rdquo;二句，以&ldquo;迎亲&rdquo;开场。妙在并不说破，只是展现两幅场景，让读者自己去玩味。京城的大道上，风光正好；姑娘的闺阁中，罗衣飘香。&mdash;&mdash;至于男方迎亲的如何吹吹打打，新嫁娘如何羞怯而兴奋地换上精美的嫁衣，种种细节，都在言外，引发出读者的无穷想象。</p>
                                <p>
                                    &ldquo;相将&rdquo;二句，缴出词人以宾客身份&ldquo;贺人新娶&rdquo;的题意。&ldquo;相将&rdquo;犹言&ldquo;相共&rdquo;。&ldquo;人月圆夜&rdquo;，点明这是正月十五元宵节夜。这一天，天边月圆，地上人双，真是良辰美景，赏心乐事，无限地喜庆和幸福。</p>
                            </span>
                        </div>
                        <a class="ml-2 d-none d-md-block" :href="'author.html?'+n.name"><img style="height:8rem;" loading="lazy" :src="'image'+n.pic" /></a>
                    </div>
                </div>
                <nav class="mt-3">
                    <ul class="pagination pagination-sm  justify-content-center">
                        <li class="page-item">
                            <a class="page-link" aria-label="Previous" href="" @click.prevent="loadAuthor(pageinfo.prePage)" v-show="!pageinfo.isFirstPage==true">
                                <span aria-hidden="true">&laquo;</span>
                                <span class="sr-only">上一页</span>
                            </a>
                        </li>
                        <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                            <a class="page-link" href="" v-text="n" @click.prevent="loadAuthor(n)"
                               :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                        </li>
                        <!--<li class="page-item">
                            <a class="page-link " href="#" v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPoems(n)"
                               v-text="n" :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                        </li>-->
                        <li class="page-item "><a class="page-link" href="">
                            <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                        </a></li>
                        <li class="page-item ">
                            <a class="page-link" aria-label="Next" href="" @click.prevent="loadAuthor(pageinfo.nextPage)" v-show="!pageinfo.isLastPage==true">
                                <span aria-hidden="true">&raquo;</span>
                                <span class="sr-only">下一页</span>
                            </a>
                        </li>

                        <li class="page-item" >
                            <span aria-hidden="true">跳转到</span>
                            <input type="text" style="width: 50px" id="page"><button @click.prevent="JumpAuthor()">跳转</button>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")


    let vm_author = new Vue({
        el:"#author",
        data:{
            writers:[],
            pageinfo:{},
            DyNames:[],
            pages:""
        },
        methods:{
            // 进行分页的方法
            loadAuthor:function (pageNum) {
                // 判断 pageNum 是否存在
                if (!pageNum){
                    pageNum =1;
                }
                axios({
                    url:"/writer/selectList",
                    method:"get",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    vm_author.writers = r.data.list
                    vm_author.pageinfo = r.data
                    vm_author.pages = r.data.pages
                    console.log(r.data)
                    //console.log(JSON.stringify(r.data))
                    /*console.log("数据:"+JSON.stringify(r.data))*/
                }).then(function () {
                    //在获取数据之后执行该方法
                    /* 超过一个字数显示省略号 */
                    $(".txt").each(function () {
                        var str = $(this).html()
                        var st = str.replace(/<[^>]+>/g,"");
                        var substr = st.substring(0,200);
                        $(this).html(substr + (str.length>200 ? '...' : ''));
                    })
                })
                axios({
                    url:"/dynasty/findAllDynastyName",
                    data:"get"
                }).then(function (r) {
                    vm_author.DyNames = r.data
                })
            },
            JumpAuthor:function () {
                var page = document.getElementById("page").value;
                if (page<=vm_author.pages && page>0){
                    this.loadAuthor(page)
                }else {
                    alert("页码不对，请重新输入！！最大页码: " + vm_author.pages)
                    $("#page").val('')
                }
            }
        },
        created:function () {
            console.log("数据处理")
            this.loadAuthor(1)
            console.log("-----------------------")
        }
    })
</script>
</html>